<template>
  <el-dialog v-el-drag-dialog title="选择考题" width="1200px" :visible.sync="visible" :append-to-body="appendToBody" :before-close="onClose" destroy-on-close>
    <div style="height: calc(85vh - 135px)">
      <split-pane :min-percent='10' :default-percent='20' split="vertical">
        <template slot="paneL">
          <el-card class="m-l-5">
            <el-tree
              ref="tagTree"
              node-key="id"
              :data="treeData"
              :props="treeProps"
              :filter-node-method="filterTagNode"
              class="filter-tree"
              default-expand-all
              highlight-current
              :expand-on-click-node="false"
              check-on-click-node
              @node-click="selectTag"
            />
          </el-card>
        </template>
        <template slot="paneR">
          <!-- table区域 -->
          <el-card class="m-l-5">
            <el-row class="m-b-5" :gutter="10">
              <div class="top-right-btn m-r-10">
                <el-row>
                  <el-button size="mini" plain type="primary" icon="el-icon-check" @click="handleConfirm()">
                    保存
                  </el-button>
                  <el-button v-if="selectionData.length > 0" size="mini" plain type="info" icon="el-icon-refresh" @click="handleClearSelected()">
                    清空已选
                  </el-button>
                </el-row>
              </div>
            </el-row>
            <el-table
              ref="question_table"
              v-loading="tableLoading"
              :data="tableData"
              element-loading-text="加载中"
              border
              fit
              highlight-current-row
              show-overflow-tooltip
              height="300px"
              @sort-change="sortChange"
              @selection-change="handleSelectionChange"
            >
              <el-table-column type="selection" width="32" />&nbsp;
              <el-table-column align="center" label="题目" prop="content" sortable show-overflow-tooltip />
              <el-table-column align="center" label="类型" prop="type" sortable width="90">
                <template slot-scope="scope">
                  <el-tag v-if="scope.row.type == '0'" type="primary">单选</el-tag>
                  <el-tag v-if="scope.row.type == '1'" type="primary">多选</el-tag>
                  <el-tag v-if="scope.row.type == '2'" type="primary">判断</el-tag>
                  <el-tag v-if="scope.row.type == '3'" type="primary">填空</el-tag>
                  <el-tag v-if="scope.row.type == '4'" type="primary">主观</el-tag>
                </template>
              </el-table-column>
              <el-table-column align="center" label="难度" prop="difficulty" sortable width="150" show-overflow-tooltip>
                <template slot-scope="scope">
                  <el-rate disabled text-color="#ff9900" :value="scope.row.difficulty"></el-rate>
                </template>
              </el-table-column>
              <el-table-column align="center" label="分值" prop="score" width="90" show-overflow-tooltip />
            </el-table>

            <pagination v-show="tableQuery.total>0" :total="tableQuery.total" :page.sync="tableQuery.page" :limit.sync="tableQuery.limit" @pagination="getTableData(false)" />
          </el-card>
        </template>
      </split-pane>
    </div>
  </el-dialog>
</template>

<script>
import { examSelectQuestionTable, tagTreeData } from '@/api/training/exam'
import SplitPane from 'vue-splitpane'

export default {
  name: 'QuestionSelectDialog',
  components: {
    SplitPane
  },
  props: {
    appendToBody: {
      type: Boolean,
      default: true
    },
    selected: {
      type: String,
      default: null
    }
  },
  data() {
    return {
      visible: false,
      filterTagText: '',
      treeData: [],
      treeProps: {
        children: 'children',
        label: 'name'
      },
      cur_node: {},
      examId: undefined,
      queryData: {
        Q_tagId_S_EQ: undefined
      },
      tableLoading: false,
      tableData: [],
      tableQuery: {
        page: 1,
        limit: 20,
        total: 0,
        sort: undefined,
        order: undefined
      },
      selectionData: [],
      skipSelectionChange: false
    }
  },
  watch: {
    filterTagText(val) {
      this.$refs.tagTree.filter(val)
    }
  },
  methods: {
    init(examId) {
      this.visible = true
      this.examId = examId
      this.queryData = {
        Q_tagId_S_EQ: undefined
      }
      this.tableQuery = {
        page: 1,
        limit: 20,
        total: 0,
        sort: undefined,
        order: undefined
      }
      this.selectionData = []

      this.$nextTick(() => {
        this.getTreeData()
        this.getTableData(true)
      })
    },
    filterTagNode(value, data) {
      if (!value) return true
      return data.title.indexOf(value) !== -1
    },
    selectTag(data, node) {
      if (data.id !== '0') {
        this.queryData.Q_tagId_S_EQ = data.id
        this.handleFilter()
      }
    },
    getTreeData() {
      this.treeData = []
      tagTreeData({
        from: 'vue'
      }).then(response => {
        this.treeData = response
      }).catch(e => {})
    },
    handleFilter() {
      this.tableQuery.page = 1
      this.getTableData(false)
    },
    handleClear() {
      this.getTableData(true)
    },
    getTableData(skipSelectionChange) {
      this.skipSelectionChange = skipSelectionChange
      const query = Object.assign(this.tableQuery, this.queryData)
      this.tableLoading = true
      examSelectQuestionTable(this.examId, query).then(response => {
        this.tableData = response.param.data
        this.tableQuery.total = response.param.recordsTotal
        if (this.selectionData.length > 0) {
          this.toggleSelection(this.selectionData)
        }
        this.tableLoading = false
        this.skipSelectionChange = false
        this.$refs.question_table.bodyWrapper.scrollTop = 0
      }).catch(e => {
        this.tableLoading = false
        this.skipSelectionChange = false
      })
    },
    sortChange(data) {
      const { prop, order } = data
      this.tableQuery.sort = prop
      if (order === 'ascending') {
        this.tableQuery.order = 'asc'
      } else {
        this.tableQuery.order = 'desc'
      }
      this.getTableData()
    },
    toggleSelection(rows) {
      if (rows) {
        rows.forEach(row => {
          this.$refs.question_table.toggleRowSelection(row)
        })
      } else {
        this.$refs.question_table.clearSelection()
      }
    },
    handleSelectionChange(selection) {
      if (selection && !this.skipSelectionChange) {
        this.selectionData = this.selectionData.filter(data => {
          let result = false
          selection.forEach(row => {
            if (data.userId === row.userId) {
              result = false
            }
          })
          return result
        })
        this.selectionData = this.selectionData.concat(selection)
      }
    },
    handleConfirm() {
      if (this.selectionData.length === 0) {
        this.$modal.msgWarning('请至少选择一项')
        return
      }

      this.$emit('confirmDialog', this.selectionData)
      this.onClose()
    },
    handleClearSelected() {
      this.skipSelectionChange = true
      this.$refs.question_table.clearSelection()
      this.selectionData = []
      this.skipSelectionChange = false
    },
    onClose() {
      this.queryData.Q_tagId_S_EQ = undefined
      this.handleClearSelected()
      this.visible = false
    }
  }
}
</script>

<style lang="scss" scoped>
.filter-tree {
  overflow-y: auto;
}

.filter-tree {
  height: calc(100vh - 370px);
}
</style>
